<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏租号管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 头部导航 */
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 30px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #4f46e5;
        }

        .nav-menu {
            display: flex;
            gap: 20px;
        }

        .nav-btn {
            padding: 8px 16px;
            background: transparent;
            border: 2px solid #4f46e5;
            border-radius: 6px;
            color: #4f46e5;
            cursor: pointer;
            transition: all 0.3s;
        }

        .nav-btn:hover, .nav-btn.active {
            background: #4f46e5;
            color: white;
        }

        /* 主要内容区域 */
        .main-content {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        /* 页面容器 */
        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
            color: #374151;
        }

        .form-control {
            width: 100%;
            padding: 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-primary {
            background: #4f46e5;
            color: white;
        }

        .btn-primary:hover {
            background: #4338ca;
            transform: translateY(-2px);
        }

        .btn-success {
            background: #10b981;
            color: white;
        }

        .btn-danger {
            background: #ef4444;
            color: white;
        }

        /* 游戏账号卡片 */
        .account-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .account-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .account-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .account-title {
            font-size: 18px;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 10px;
        }

        .account-level {
            background: #fbbf24;
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            display: inline-block;
            margin-bottom: 10px;
        }

        .account-price {
            font-size: 20px;
            font-weight: bold;
            color: #ef4444;
            margin: 10px 0;
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-available {
            background: #dcfce7;
            color: #166534;
        }

        .status-rented {
            background: #fecaca;
            color: #991b1b;
        }

        /* 购物车 */
        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #e5e7eb;
        }

        .cart-total {
            font-size: 24px;
            font-weight: bold;
            color: #ef4444;
            text-align: right;
            margin-top: 20px;
        }

        /* 管理面板表格 */
        .admin-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .admin-table th,
        .admin-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
        }

        .admin-table th {
            background: #f9fafb;
            font-weight: 600;
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .header {
                flex-direction: column;
                gap: 15px;
            }

            .nav-menu {
                flex-wrap: wrap;
                justify-content: center;
            }

            .account-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 提示消息 */
        .alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .alert-success {
            background: #dcfce7;
            color: #166534;
            border: 1px solid #bbf7d0;
        }

        .alert-error {
            background: #fecaca;
            color: #991b1b;
            border: 1px solid #fca5a5;
        }

        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="logo">🎮 游戏租号系统</div>
            <nav class="nav-menu">
                <button class="nav-btn active" onclick="showPage('home')">首页</button>
                <button class="nav-btn" onclick="showPage('accounts')">游戏账号</button>
                <button class="nav-btn" onclick="showPage('cart')" id="cartBtn">购物车 (<span id="cartCount">0</span>)</button>
                <button class="nav-btn" onclick="showPage('orders')">我的订单</button>
                <button class="nav-btn" onclick="showPage('login')" id="loginBtn">登录</button>
                <button class="nav-btn hidden" onclick="showPage('admin')" id="adminBtn">管理面板</button>
                <button class="nav-btn hidden" onclick="logout()" id="logoutBtn">退出登录</button>
            </nav>
        </header>

        <!-- 主要内容 -->
        <main class="main-content">
            <!-- 首页 -->
            <div id="home" class="page active">
                <h2>🎮 欢迎来到游戏租号系统</h2>
                <p style="margin: 20px 0; color: #6b7280;">在这里你可以租用各种热门游戏的高级账号，体验不同的游戏乐趣！</p>
                
                <div class="account-grid" id="hotAccounts">
                    <!-- 热门账号将在这里显示 -->
                </div>
            </div>

            <!-- 登录注册页面 -->
            <div id="login" class="page">
                <div style="max-width: 400px; margin: 0 auto;">
                    <!-- 登录表单 -->
                    <div id="loginForm">
                        <h2>用户登录</h2>
                        <div id="loginAlert"></div>
                        <form onsubmit="handleLogin(event)">
                            <div class="form-group">
                                <label>用户名或邮箱</label>
                                <input type="text" id="loginUsername" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" id="loginPassword" class="form-control" required>
                            </div>
                            <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 10px;">登录</button>
                        </form>
                        <p style="text-align: center;">
                            还没有账号？<a href="#" onclick="showRegisterForm()" style="color: #4f46e5;">立即注册</a>
                        </p>
                    </div>

                    <!-- 注册表单 -->
                    <div id="registerForm" class="hidden">
                        <h2>用户注册</h2>
                        <div id="registerAlert"></div>
                        <form onsubmit="handleRegister(event)">
                            <div class="form-group">
                                <label>用户名</label>
                                <input type="text" id="regUsername" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>邮箱</label>
                                <input type="email" id="regEmail" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>昵称</label>
                                <input type="text" id="regNickname" class="form-control" required>
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" id="regPassword" class="form-control" required>
                            </div>
                            <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 10px;">注册</button>
                        </form>
                        <p style="text-align: center;">
                            已有账号？<a href="#" onclick="showLoginForm()" style="color: #4f46e5;">立即登录</a>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 游戏账号页面 -->
            <div id="accounts" class="page">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                    <h2>游戏账号</h2>
                    <div>
                        <input type="text" id="searchInput" placeholder="搜索游戏名称..." style="padding: 8px; margin-right: 10px; border: 1px solid #d1d5db; border-radius: 4px;">
                        <button onclick="searchAccounts()" class="btn btn-primary">搜索</button>
                    </div>
                </div>
                <div class="account-grid" id="accountsList">
                    <!-- 账号列表将在这里显示 -->
                </div>
            </div>

            <!-- 购物车页面 -->
            <div id="cart" class="page">
                <h2>购物车</h2>
                <div id="cartItems">
                    <!-- 购物车项目将在这里显示 -->
                </div>
                <div class="cart-total">
                    总计: ¥<span id="cartTotal">0.00</span>
                </div>
                <button onclick="checkout()" class="btn btn-success" style="width: 100%; margin-top: 20px;">结算</button>
            </div>

            <!-- 订单页面 -->
            <div id="orders" class="page">
                <h2>我的订单</h2>
                <div id="ordersList">
                    <!-- 订单列表将在这里显示 -->
                </div>
            </div>

            <!-- 管理员面板 -->
            <div id="admin" class="page">
                <h2>管理员面板</h2>
                <div style="margin-bottom: 20px;">
                    <button class="nav-btn" onclick="showAdminTab('users')">用户管理</button>
                    <button class="nav-btn" onclick="showAdminTab('accounts')">账号管理</button>
                    <button class="nav-btn" onclick="showAdminTab('orders')">订单管理</button>
                </div>
                
                <div id="adminUsers" class="admin-tab">
                    <h3>用户管理</h3>
                    <table class="admin-table" id="usersTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div id="adminAccounts" class="admin-tab hidden">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
                        <h3>账号管理</h3>
                        <button onclick="showAddAccountForm()" class="btn btn-primary">添加账号</button>
                    </div>
                    <table class="admin-table" id="adminAccountsTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>游戏名称</th>
                                <th>账号名称</th>
                                <th>等级</th>
                                <th>小时价格</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

                <div id="adminOrders" class="admin-tab hidden">
                    <h3>订单管理</h3>
                    <table class="admin-table" id="ordersTable">
                        <thead>
                            <tr>
                                <th>订单ID</th>
                                <th>用户</th>
                                <th>商品</th>
                                <th>金额</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 全局变量
        let currentUser = null;
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        let orders = JSON.parse(localStorage.getItem('orders')) || [];
        const API_BASE = 'http://localhost:8080/api';

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateCartCount();
            checkLoginStatus();
            loadHotAccounts();
        });

        // 显示页面
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示目标页面
            document.getElementById(pageId).classList.add('active');
            
            // 更新导航按钮状态
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            // 找到并激活对应的导航按钮
            const targetBtn = document.querySelector(`[onclick="showPage('${pageId}')"]`);
            if (targetBtn) {
                targetBtn.classList.add('active');
            }
            
            // 根据页面加载相应数据
            switch(pageId) {
                case 'home':
                    loadHotAccounts();
                    break;
                case 'accounts':
                    loadAccounts();
                    break;
                case 'cart':
                    renderCart();
                    break;
                case 'orders':
                    renderOrders();
                    break;
                case 'admin':
                    loadAdminData();
                    break;
            }
        }

        // 检查登录状态
        function checkLoginStatus() {
            const token = localStorage.getItem('token');
            if (token) {
                // 验证token
                fetch(`${API_BASE}/user/auth/verify`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({token: token})
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200 && data.data.valid) {
                        currentUser = {
                            id: data.data.userId,
                            username: data.data.username
                        };
                        updateUIForLoggedInUser();
                    } else {
                        localStorage.removeItem('token');
                    }
                })
                .catch(error => {
                    console.error('验证token失败:', error);
                    localStorage.removeItem('token');
                });
            }
        }

        // 更新登录用户的UI
        function updateUIForLoggedInUser() {
            document.getElementById('loginBtn').classList.add('hidden');
            document.getElementById('logoutBtn').classList.remove('hidden');
            
            // 如果是管理员（这里简化判断，实际应该从后端获取权限）
            if (currentUser.username === 'admin') {
                document.getElementById('adminBtn').classList.remove('hidden');
            }
        }

        // 显示注册表单
        function showRegisterForm() {
            document.getElementById('loginForm').classList.add('hidden');
            document.getElementById('registerForm').classList.remove('hidden');
        }

        // 显示登录表单
        function showLoginForm() {
            document.getElementById('registerForm').classList.add('hidden');
            document.getElementById('loginForm').classList.remove('hidden');
        }

        // 处理登录
        function handleLogin(event) {
            event.preventDefault();
            
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            
            fetch(`${API_BASE}/user/login`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            })
            .then(response => response.json())
            .then(data => {
                const alertDiv = document.getElementById('loginAlert');
                if (data.code === 200) {
                    localStorage.setItem('token', data.data.accessToken);
                    currentUser = {
                        id: data.data.userId,
                        username: data.data.username
                    };
                    alertDiv.innerHTML = '<div class="alert alert-success">登录成功！</div>';
                    updateUIForLoggedInUser();
                    setTimeout(() => {
                        showPage('home');
                        loadHotAccounts(); // 重新加载首页数据
                    }, 1000);
                } else {
                    alertDiv.innerHTML = `<div class="alert alert-error">${data.message}</div>`;
                }
            })
            .catch(error => {
                console.error('登录失败:', error);
                document.getElementById('loginAlert').innerHTML = '<div class="alert alert-error">登录失败，请检查网络连接</div>';
            });
        }

        // 处理注册
        function handleRegister(event) {
            event.preventDefault();
            
            const username = document.getElementById('regUsername').value;
            const email = document.getElementById('regEmail').value;
            const nickname = document.getElementById('regNickname').value;
            const password = document.getElementById('regPassword').value;
            
            fetch(`${API_BASE}/user/register`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: username,
                    email: email,
                    nickname: nickname,
                    password: password
                })
            })
            .then(response => response.json())
            .then(data => {
                const alertDiv = document.getElementById('registerAlert');
                if (data.code === 200) {
                    alertDiv.innerHTML = '<div class="alert alert-success">注册成功！请登录</div>';
                    setTimeout(() => showLoginForm(), 1500);
                } else {
                    alertDiv.innerHTML = `<div class="alert alert-error">${data.message}</div>`;
                }
            })
            .catch(error => {
                console.error('注册失败:', error);
                document.getElementById('registerAlert').innerHTML = '<div class="alert alert-error">注册失败，请检查网络连接</div>';
            });
        }

        // 退出登录
        function logout() {
            localStorage.removeItem('token');
            currentUser = null;
            document.getElementById('loginBtn').classList.remove('hidden');
            document.getElementById('logoutBtn').classList.add('hidden');
            document.getElementById('adminBtn').classList.add('hidden');
            showPage('home');
        }

        // 加载热门账号
        function loadHotAccounts() {
            console.log('开始加载热门账号...');
            fetch(`${API_BASE}/accounts/hot?limit=6`)
            .then(response => {
                console.log('热门账号API响应状态:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('热门账号API响应数据:', data);
                if (data.code === 200) {
                    renderAccounts(data.data, 'hotAccounts');
                } else {
                    console.error('热门账号API返回失败:', data.message);
                    document.getElementById('hotAccounts').innerHTML = '<p style="text-align: center; color: #ef4444;">加载失败: ' + (data.message || '未知错误') + '</p>';
                }
            })
            .catch(error => {
                console.error('加载热门账号失败:', error);
                document.getElementById('hotAccounts').innerHTML = '<p style="text-align: center; color: #ef4444;">网络错误，请检查后端服务是否运行</p>';
            });
        }

        // 加载账号列表
        function loadAccounts(page = 1, size = 12) {
            console.log('开始加载账号列表...');
            fetch(`${API_BASE}/accounts?current=${page}&size=${size}`)
            .then(response => {
                console.log('账号列表API响应状态:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('账号列表API响应数据:', data);
                if (data.code === 200) {
                    renderAccounts(data.data.records, 'accountsList');
                } else {
                    console.error('账号列表API返回失败:', data.message);
                    document.getElementById('accountsList').innerHTML = '<p style="text-align: center; color: #ef4444;">加载失败: ' + (data.message || '未知错误') + '</p>';
                }
            })
            .catch(error => {
                console.error('加载账号列表失败:', error);
                document.getElementById('accountsList').innerHTML = '<p style="text-align: center; color: #ef4444;">网络错误，请检查后端服务是否运行</p>';
            });
        }

        // 搜索账号
        function searchAccounts() {
            const keyword = document.getElementById('searchInput').value;
            if (!keyword.trim()) {
                loadAccounts();
                return;
            }
            
            fetch(`${API_BASE}/accounts/search?keyword=${encodeURIComponent(keyword)}`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    renderAccounts(data.data.records, 'accountsList');
                }
            })
            .catch(error => {
                console.error('搜索失败:', error);
            });
        }

        // 渲染账号列表
        function renderAccounts(accounts, containerId) {
            const container = document.getElementById(containerId);
            container.innerHTML = '';
            
            if (!accounts || accounts.length === 0) {
                container.innerHTML = '<p style="text-align: center; color: #6b7280;">暂无游戏账号数据</p>';
                return;
            }
            
            accounts.forEach(account => {
                const statusText = account.status === 1 ? '可租用' : account.status === 2 ? '已租用' : '维护中';
                const statusClass = account.status === 1 ? 'status-available' : 'status-rented';
                
                const accountCard = document.createElement('div');
                accountCard.className = 'account-card';
                accountCard.innerHTML = `
                    <div class="account-title">${account.gameName}</div>
                    <div class="account-level">${account.accountLevel || '高级账号'}</div>
                    <div style="color: #6b7280; margin-bottom: 10px;">${account.description || '无描述'}</div>
                    <div class="account-price">¥${account.hourlyPrice}/小时</div>
                    <div style="margin-bottom: 15px;">
                        <span class="status-badge ${statusClass}">${statusText}</span>
                    </div>
                    ${account.status === 1 ? `<button onclick="addToCart(${account.id})" class="btn btn-primary">加入购物车</button>` : ''}
                `;
                container.appendChild(accountCard);
            });
        }

        // 添加到购物车
        function addToCart(accountId) {
            if (!currentUser) {
                alert('请先登录');
                showPage('login');
                return;
            }
            
            // 检查是否已在购物车中
            if (cart.find(item => item.id === accountId)) {
                alert('该商品已在购物车中');
                return;
            }
            
            // 获取账号详情
            fetch(`${API_BASE}/accounts/${accountId}`)
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    cart.push(data.data);
                    localStorage.setItem('cart', JSON.stringify(cart));
                    updateCartCount();
                    alert('已添加到购物车');
                }
            })
            .catch(error => {
                console.error('添加到购物车失败:', error);
            });
        }

        // 更新购物车数量
        function updateCartCount() {
            document.getElementById('cartCount').textContent = cart.length;
        }

        // 渲染购物车
        function renderCart() {
            const container = document.getElementById('cartItems');
            container.innerHTML = '';
            
            if (cart.length === 0) {
                container.innerHTML = '<p style="text-align: center; color: #6b7280;">购物车为空</p>';
                document.getElementById('cartTotal').textContent = '0.00';
                return;
            }
            
            let total = 0;
            cart.forEach((item, index) => {
                const cartItem = document.createElement('div');
                cartItem.className = 'cart-item';
                cartItem.innerHTML = `
                    <div>
                        <div style="font-weight: 500;">${item.gameName}</div>
                        <div style="color: #6b7280;">${item.accountLevel || '高级账号'}</div>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-weight: bold; color: #ef4444;">¥${item.hourlyPrice}/小时</div>
                        <button onclick="removeFromCart(${index})" class="btn btn-danger" style="font-size: 12px; padding: 4px 8px;">移除</button>
                    </div>
                `;
                container.appendChild(cartItem);
                total += parseFloat(item.hourlyPrice);
            });
            
            document.getElementById('cartTotal').textContent = total.toFixed(2);
        }

        // 从购物车移除
        function removeFromCart(index) {
            cart.splice(index, 1);
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartCount();
            renderCart();
        }

        // 结算
        function checkout() {
            if (!currentUser) {
                alert('请先登录');
                showPage('login');
                return;
            }
            
            if (cart.length === 0) {
                alert('购物车为空');
                return;
            }
            
            // 模拟结算（实际项目中应该调用后端API）
            const order = {
                id: Date.now(),
                userId: currentUser.id,
                items: [...cart],
                total: cart.reduce((sum, item) => sum + parseFloat(item.hourlyPrice), 0),
                status: '已支付',
                createTime: new Date().toLocaleString()
            };
            
            orders.push(order);
            localStorage.setItem('orders', JSON.stringify(orders));
            
            // 清空购物车
            cart = [];
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartCount();
            
            alert('支付成功！');
            showPage('orders');
        }

        // 渲染订单列表
        function renderOrders() {
            const container = document.getElementById('ordersList');
            container.innerHTML = '';
            
            if (orders.length === 0) {
                container.innerHTML = '<p style="text-align: center; color: #6b7280;">暂无订单</p>';
                return;
            }
            
            orders.reverse().forEach(order => {
                const orderDiv = document.createElement('div');
                orderDiv.style.cssText = 'border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 15px;';
                orderDiv.innerHTML = `
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <div style="font-weight: bold;">订单号: ${order.id}</div>
                        <div style="color: #10b981;">${order.status}</div>
                    </div>
                    <div style="margin-bottom: 10px;">
                        ${order.items.map(item => `<div>${item.gameName} - ${item.accountLevel}</div>`).join('')}
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <div style="color: #6b7280;">${order.createTime}</div>
                        <div style="font-weight: bold; color: #ef4444;">总计: ¥${order.total.toFixed(2)}</div>
                    </div>
                `;
                container.appendChild(orderDiv);
            });
        }

        // 显示管理员标签
        function showAdminTab(tabName) {
            document.querySelectorAll('.admin-tab').forEach(tab => {
                tab.classList.add('hidden');
            });
            document.getElementById(`admin${tabName.charAt(0).toUpperCase() + tabName.slice(1)}`).classList.remove('hidden');
        }

        // 加载管理员数据
        function loadAdminData() {
            if (!currentUser || currentUser.username !== 'admin') {
                alert('权限不足');
                return;
            }
            showAdminTab('users');
        }

        // 显示添加账号表单
        function showAddAccountForm() {
            alert('添加账号功能需要后端支持');
        }
    </script>
</body>
</html> 